<template>
	<view class="content">
		<view class="sp" v-if="sp" @click="goToUrl()">
			<slot></slot>
		</view>
		<view class="btn" :class="{ yellow: item.stress }" v-for="item in btnsList" @click="goToUrl(item.url)">
			{{ item.title }}
			<view class="icon">
				<u-icon name="arrow-right" color="white" top="1"></u-icon>
			</view>
		</view>
	</view>
</template>

<script >
export default {
	props: {
		btnsList: {
			type: Array,
			default: []
		},
		sp: {
			type: Boolean,
			default: true
		},
	},
}

</script>
<style lang="scss" scoped>
.content {
	padding: 40rpx;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;

	.sp {
		width: 100%;
		border-radius: 10px;
		color: white;
		margin-bottom: 20rpx;
		background: linear-gradient(180deg, #3A61ED 0%, #5656F1 100%);
	}

	.btn {
		display: flex;
		flex-direction: row;
		align-items: center;
		color: white;
		height: 140rpx;
		width: 320rpx;
		margin-bottom: 20rpx;
		padding-left: 40rpx;
		border-radius: 10px;
		background: linear-gradient(180deg, #3A61ED 0%, #5656F1 100%);
		box-sizing: border-box;

		.icon {
			margin-left: auto;
			padding-right: 30rpx;
		}

		&.yellow {
			background: linear-gradient(0deg, #FFC300 3%, #FFCB1F 100%);
		}
	}
}
</style>